<template>
	<view class="container">
		<view class="header">
			<view class="title">八字星命</view>
		</view>
		
		<view class="content-card">
			<view class="subtitle">天人合一的命理智慧</view>
			<view class="desc-text">
				每个人出生的时辰，都蕴含着天干地支的独特组合，五行生克的玄妙平衡。八字星命是中华文化的瑰宝，它揭示了您与生俱来的天赋禀性、命运走向和人生课题。通过解读生辰八字的奥秘，您将发现自己命运的玄机所在。
			</view>
			
			<!-- 添加日期选择器 -->
			<view class="date-select-section">
				<view class="section-title">解析您的命盘</view>
				<view class="date-picker">
					<picker 
						mode="date" 
						:value="selectedDate" 
						:start="getMinDate()"
						:end="getMaxDate()"
						@change="handleDateChange"
					>
						<view class="picker-input">
							{{ selectedDate || '请选择您的出生日期' }}
						</view>
					</picker>
				</view>
				<button class="query-btn" @click="getBirthdayBookReading">揭示命盘奥秘</button>
			</view>
			
			<!-- 解析结果展示 -->
			<view v-if="bookResult" class="result-section">
				<view class="cosmic-banner" :style="{ background: bookResult.gradient }"></view>
				<view class="result-title">{{ bookResult.title }}</view>
				<view class="cosmic-symbol" :style="{ color: bookResult.color }">{{ bookResult.symbol }}</view>
				<view class="result-date">{{ selectedDate }} 生辰</view>
				
				<view class="result-essence">
					<view class="essence-title">命主五行</view>
					<view class="essence-content">{{ bookResult.essence }}</view>
				</view>
				
				<view class="cosmic-divider"></view>
				
				<view class="category-container">
					<view class="result-category">
						<view class="category-icon" :style="{ background: bookResult.gradient }">性</view>
						<view class="category-info">
							<view class="category-title">性情禀赋</view>
							<view class="category-content">{{ bookResult.personality }}</view>
						</view>
					</view>
					
					<view class="result-category">
						<view class="category-icon" :style="{ background: bookResult.gradient }">才</view>
						<view class="category-info">
							<view class="category-title">才智特长</view>
							<view class="category-content">{{ bookResult.strengths }}</view>
						</view>
					</view>
					
					<view class="result-category">
						<view class="category-icon" :style="{ background: bookResult.gradient }">劫</view>
						<view class="category-info">
							<view class="category-title">命中劫数</view>
							<view class="category-content">{{ bookResult.challenges }}</view>
						</view>
					</view>
					
					<view class="result-category">
						<view class="category-icon" :style="{ background: bookResult.gradient }">缘</view>
						<view class="category-info">
							<view class="category-title">姻缘福运</view>
							<view class="category-content">{{ bookResult.relationships }}</view>
						</view>
					</view>
					
					<view class="result-category">
						<view class="category-icon" :style="{ background: bookResult.gradient }">卦</view>
						<view class="category-info">
							<view class="category-title">卦象指引</view>
							<view class="category-content">{{ bookResult.advice }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="divider">
				<view class="divider-line"></view>
				<view class="divider-text">命理知识</view>
				<view class="divider-line"></view>
			</view>
			
			<view class="section">
				<view class="section-title">八字星命的奥秘</view>
				<view class="paragraph">
					八字星命源于中华五千年的智慧传承，是天人合一思想的重要体现。它将人的出生时辰拆解为年月日时四柱八字，通过天干地支的排列组合，揭示人与宇宙的深层联系。
				</view>
				<view class="paragraph">
					您的出生日期不仅是时间的记录，更蕴含着五行生克、阴阳平衡的奥妙。八字解读揭示了您先天的命格、性情、才智，以及人生的机缘与挑战。
				</view>
			</view>
			
			<view class="cosmos-grid">
				<view class="cosmos-element" v-for="(element, index) in cosmicElements" :key="index">
					<view class="element-icon" :style="{ background: element.gradient }">{{ element.symbol }}</view>
					<view class="element-name">{{ element.name }}</view>
				</view>
			</view>
			
			<view class="section">
				<view class="section-title">命理解读的层次</view>
				<view class="layer-box">
					<view class="layer-item">
						<view class="layer-number">1</view>
						<view class="layer-content">
							<view class="layer-title">表层：先天性情</view>
							<view class="layer-desc">揭示您与生俱来的性格特质、行为模式和思维倾向</view>
						</view>
					</view>
					
					<view class="layer-item">
						<view class="layer-number">2</view>
						<view class="layer-content">
							<view class="layer-title">中层：才智运势</view>
							<view class="layer-desc">展现您的禀赋才能、事业方向和财富机遇</view>
						</view>
					</view>
					
					<view class="layer-item">
						<view class="layer-number">3</view>
						<view class="layer-content">
							<view class="layer-title">深层：因果宿命</view>
							<view class="layer-desc">探索您需要化解的人生课题与历劫</view>
						</view>
					</view>
					
					<view class="layer-item">
						<view class="layer-number">4</view>
						<view class="layer-content">
							<view class="layer-title">核心：命数转化</view>
							<view class="layer-desc">指引如何通过修身养性转化命运</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="cosmic-wisdom">
				<view class="wisdom-title">古训箴言</view>
				<view class="wisdom-quote">"命由天定，运由己生。明其理者，趋吉避凶；知其数者，化厄为祥。"</view>
				<view class="wisdom-author">— 《增广贤文》</view>
			</view>
		</view>
		
		<view class="back-btn" @click="goBack">返回</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	// 日期选择相关
	const selectedDate = ref('');
	const bookResult = ref(null);
	
	// 五行元素数据
	const cosmicElements = [
		{ 
			name: '金', 
			symbol: '金', 
			gradient: 'linear-gradient(135deg, #d4af37, #f1c40f)'
		},
		{ 
			name: '木', 
			symbol: '木', 
			gradient: 'linear-gradient(135deg, #27ae60, #2ecc71)'
		},
		{ 
			name: '水', 
			symbol: '水', 
			gradient: 'linear-gradient(135deg, #3498db, #2980b9)'
		},
		{ 
			name: '火', 
			symbol: '火', 
			gradient: 'linear-gradient(135deg, #e74c3c, #c0392b)'
		},
		{ 
			name: '土', 
			symbol: '土', 
			gradient: 'linear-gradient(135deg, #795548, #5d4037)'
		}
	];
	
	// 处理日期选择
	const handleDateChange = (e) => {
		selectedDate.value = e.detail.value;
	};
	
	// 获取最小日期
	const getMinDate = () => {
		return '1900-01-01';
	};
	
	// 获取最大日期
	const getMaxDate = () => {
		const today = new Date();
		const year = today.getFullYear();
		const month = String(today.getMonth() + 1).padStart(2, '0');
		const day = String(today.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	};
	
	// 获取生日书解析
	const getBirthdayBookReading = () => {
		if (!selectedDate.value) {
			uni.showToast({ title: '请选择日期', icon: 'none' });
			return;
		}
		
		// 解析日期
		const [year, month, day] = selectedDate.value.split('-').map(Number);
		
		// 根据月日组合获取解析内容
		const reading = getBirthdayBookData(month, day);
		
		// 设置结果
		bookResult.value = reading;
	};
	
	// 获取生日书的解析数据（中国传统命理版本）
	const getBirthdayBookData = (month, day) => {
		// 五行与生肖映射
		const wuxingData = {
			jin: { // 金 (8-9月)
				title: "金命之人",
				symbol: "金",
				color: "#d4af37",
				gradient: "linear-gradient(135deg, #d4af37, #f1c40f)",
				essence: "您的命主五行属金，具有金的刚毅与锐利特质。金主义，金主肃杀，象征着秋季收获与决断的能量。您生来具有坚韧不拔的意志和清晰的判断力，如同秋日里的白露与霜降，清澈而果断。",
				personality: "性格刚毅坚强，做事有始有终。行事果断，不拖泥带水，讲究条理和规矩。处事公正严明，重视礼节与原则，不轻易表露情感。您善于分析，思维缜密，能抓住事物的关键，以公正、权威的姿态处理问题。",
				strengths: "条理清晰，组织能力强，适合从事管理、司法、金融等需要严谨思维的工作。您天生具有领导气质，能够在关键时刻做出决策。金的锐利赋予您敏锐的判断力和执行力，能够在复杂环境中保持清醒。",
				challenges: "金性过刚易折，有时显得固执己见或过于严厉。需警惕因刚直不阿而与人产生摩擦，学会适时展现柔和的一面。金旺则易伤肺，应注意呼吸系统保养，避免过度劳累和忧思。",
				relationships: "在人际关系中，您重视忠诚与信义，一旦承诺便会坚守。婚姻上需寻找能包容您刚毅性格的伴侣，最宜与火命或土命人结合，火能炼金成器，土能生金助旺。若遇水命之人，切勿过度纵容其变化无常。",
				advice: "修身之道在于发挥金的坚毅而避免刚愎自用。练习倾听和接纳不同意见，培养包容心。事业上适合长期规划，稳扎稳打，切忌急功近利。养生当注重肺部保养，常以温和食物调补，如梨、银耳等滋阴润燥之品。顺应秋气收敛，不妄耗精气，可延年益寿。"
			},
			mu: { // 木 (2-3月)
				title: "木命之人",
				symbol: "木",
				color: "#27ae60",
				gradient: "linear-gradient(135deg, #27ae60, #2ecc71)",
				essence: "您的命主五行属木，具有木的生长与柔韧特质。木主仁，木主生发，象征着春季萌芽与成长的能量。您生来充满活力与创造力，如同春日里的草木吐芽，生机盎然。",
				personality: "性情温和开朗，富有理想与抱负。待人亲切，乐于助人，善解人意。处事灵活变通，能屈能伸，有较强的适应能力。您心怀远大理想，追求进步，喜欢探索未知领域，富有创造性思维。",
				strengths: "思维活跃，创意丰富，适合从事教育、艺术、文化等需要创造力的工作。您具有较强的说服力和感染力，能够激发他人的潜能。木的柔韧性使您在逆境中保持韧性，不易被打倒。",
				challenges: "木性喜达不喜约，有时显得优柔寡断或过于理想化。需警惕因过度追求完美而耽误时机，学会果断决策。木弱则易受金克伐，应注意避免过度劳累和情绪波动，保持心态平和。",
				relationships: "在人际关系中，您乐于交友，人缘颇佳。婚姻上需寻找能欣赏您才华的伴侣，最宜与水命或火命人结合，水能滋养木，木能生火。若遇金命之人，需注意沟通方式，避免刚柔相克。",
				advice: "修身之道在于发挥木的生长力而避免盲目扩张。修养静心，培养专注力，不要同时追求太多目标。事业上宜循序渐进，扎实根基。养生当注重肝脏保养，保持情绪舒畅，常食绿色蔬果，如菠菜、绿豆等养肝明目之品。顺应春气生发，早睡早起，可培元固本。"
			},
			shui: { // 水 (12-1月)
				title: "水命之人",
				symbol: "水",
				color: "#3498db",
				gradient: "linear-gradient(135deg, #3498db, #2980b9)",
				essence: "您的命主五行属水，具有水的智慧与灵动特质。水主智，水主滋润，象征着冬季蕴藏与积累的能量。您生来聪颖敏锐，思想深邃，如同冬日里的静水深流，蕴含无限智慧。",
				personality: "性情沉静深思，富有智慧和耐心。待人真诚，不露锋芒，善于倾听和包容。处事灵活多变，善于适应各种环境，有较强的应变能力。您思维敏捷，洞察力强，对事物有独到见解，善于在复杂中找到规律。",
				strengths: "记忆力强，学习能力佳，适合从事研究、写作、策划等需要深度思考的工作。您具有超强的感知力和直觉，能够捕捉细微的信息和变化。水的包容性使您能够海纳百川，不断积累知识和经验。",
				challenges: "水性无形难定，有时显得优柔寡断或过于内向。需警惕因过度思考而缺乏行动力，学会及时表达自己的想法。水弱则易受火克制，应注意避免情绪波动和压力过大，保持心态平和。",
				relationships: "在人际关系中，您不喜表现自我，但内心情感丰富。婚姻上需寻找能理解您内心世界的伴侣，最宜与金命或木命人结合，金能生水，水能滋木。若遇土命之人，需注意克服沟通障碍，避免水土不服。",
				advice: "修身之道在于发挥水的智慧而避免漫无目的。培养决断力，不要过度犹豫不决。事业上宜专注深耕，避免频繁变换方向。养生当注重肾脏保养，早睡早起，常食黑色食物，如黑豆、黑芝麻等补肾固精之品。顺应冬气收藏，保暖养静，可固本培元。"
			},
			huo: { // 火 (5-6月)
				title: "火命之人",
				symbol: "火",
				color: "#e74c3c",
				gradient: "linear-gradient(135deg, #e74c3c, #c0392b)",
				essence: "您的命主五行属火，具有火的热情与明亮特质。火主礼，火主温暖，象征着夏季活力与热烈的能量。您生来热情奔放，精力充沛，如同盛夏的烈日，光芒四射。",
				personality: "性情热情开朗，活力四射，乐观向上。待人真诚热忱，热心助人，富有感染力。处事雷厉风行，反应迅速，有较强的行动力和冲劲。您思维活跃，想象力丰富，善于表达和沟通，能够激发他人的热情。",
				strengths: "表达能力强，领导魅力足，适合从事演讲、销售、表演等需要感染力的工作。您具有卓越的创造力和激情，能够在团队中点燃希望之火。火的温暖特性使您能够团结人心，带领团队向前。",
				challenges: "火性急躁易燥，有时显得冲动或过于乐观。需警惕因过度热情而忽略细节和风险，学会冷静思考。火旺则易伤心，应注意避免情绪过度激动和劳累过度，保持心态平和。",
				relationships: "在人际关系中，您人缘极佳，容易成为群体中心。婚姻上需寻找能包容您热情的伴侣，最宜与木命或土命人结合，木能生火，土能克水保火。若遇水命之人，需注意相互包容，避免水火相克。",
				advice: "修身之道在于发挥火的温暖而避免过度张扬。修养静心，培养耐心和细致，不要急于求成。事业上宜稳扎稳打，注重细节。养生当注重心脏保养，保持情绪稳定，常食红色食物，如红枣、山楂等养心安神之品。顺应夏气生长，但避免过度消耗，可使气血和顺。"
			},
			tu: { // 土 (余下各月)
				title: "土命之人",
				symbol: "土",
				color: "#795548",
				gradient: "linear-gradient(135deg, #795548, #5d4037)",
				essence: "您的命主五行属土，具有土的厚重与包容特质。土主信，土主安稳，象征着四季交替与中和的能量。您生来稳重踏实，心地宽厚，如同大地般包容万物，给予支持。",
				personality: "性情温和稳重，踏实可靠，不喜变动。待人诚恳厚道，重情重义，讲求信用。处事稳健务实，深思熟虑，有较强的毅力和耐心。您思维严谨，逻辑清晰，注重实际，不追求虚幻。",
				strengths: "责任心强，执行力佳，适合从事行政、管理、服务等需要踏实作风的工作。您具有非凡的耐力和恒心，能够在长期项目中保持专注和投入。土的包容性使您能够调和各方，成为团队的稳定力量。",
				challenges: "土性重滞难转，有时显得固执或缺乏变通。需警惕因过度保守而错失机会，学会适时创新。土厚则易伤脾，应注意饮食规律和适度运动，避免久坐不动。",
				relationships: "在人际关系中，您重视亲情友情，关系稳固持久。婚姻上需寻找能理解您踏实性格的伴侣，最宜与火命或金命人结合，火能生土，土能生金。若遇木命之人，需注意相互包容，避免木克土的冲突。",
				advice: "修身之道在于发挥土的厚重而避免因循守旧。培养开放心态，接受新事物和新思想。事业上宜立足当下，稳中求进。养生当注重脾胃保养，饮食有节，常食黄色食物，如小米、南瓜等健脾和胃之品。顺应四季交替，保持中正平和，可延年益寿。"
			}
		};
		
		// 根据月份确定五行属性
		let wuxing;
		if ((month == 12) || (month == 1)) {
			wuxing = 'shui'; // 冬季水旺
		} else if ((month == 2) || (month == 3)) {
			wuxing = 'mu';   // 春季木旺
		} else if ((month == 5) || (month == 6)) {
			wuxing = 'huo';  // 夏季火旺
		} else if ((month == 8) || (month == 9)) {
			wuxing = 'jin';  // 秋季金旺
		} else {
			wuxing = 'tu';   // 其余土旺
		}
		
		// 获取基础五行特性
		const baseReading = wuxingData[wuxing];
		
		// 根据日期细节调整解读内容（天干地支影响）
		const dayMod = day % 10;
		let personalityAdd = '';
		let adviceAdd = '';
		
		// 根据日支调整解读
		if (dayMod < 3) {
			personalityAdd = " 日支显示您具有阳刚之气，性格中多一分果敢与决断，行事坚定而有主见，能够在关键时刻挺身而出，承担责任。";
			adviceAdd = " 修身养性当贵在明理，强化自身定力，不为外物所扰。事业上注重长远布局，以稳为主，可成大器。";
		} else if (dayMod < 6) {
			personalityAdd = " 日支显示您兼具阴柔之美，性格中多一分包容与通达，处事圆融而有弹性，善于协调各方关系，化解矛盾冲突。";
			adviceAdd = " 修身养性当贵在知足，培养宁静致远的心态，不为名利所累。人际关系上以和为贵，广结善缘，可积厚福。";
		} else {
			personalityAdd = " 日支显示您阴阳调和，性格中多一分灵活与智慧，能够因时制宜，随机应变，既有主见又善于倾听，既勇往直前又审时度势。";
			adviceAdd = " 修身养性当贵在知变，掌握变通之道，不为成见所限。人生道路上顺势而为，择善而行，可获大智大慧。";
		}
		
		// 返回综合解读结果
		return {
			...baseReading,
			personality: baseReading.personality + personalityAdd,
			advice: baseReading.advice + adviceAdd
		};
	};
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding-bottom: 40rpx;
}

.header {
	padding: 30rpx;
	background-color: #ffffff;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.title {
	font-size: 36rpx;
	font-weight: 600;
	color: #303133;
}

.content-card {
	background-color: #ffffff;
	margin: 30rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.05);
}

.subtitle {
	font-size: 32rpx;
	font-weight: 600;
	color: #303133;
	margin-bottom: 20rpx;
}

.desc-text {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.6;
	margin-bottom: 30rpx;
}

.date-select-section {
	background-color: #f8f9fc;
	padding: 30rpx;
	border-radius: 16rpx;
	margin: 30rpx 0;
}

.date-picker {
	margin: 20rpx 0;
	background-color: #ffffff;
	padding: 20rpx;
	border-radius: 10rpx;
	box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
}

.picker-input {
	color: #303133;
	font-size: 28rpx;
	padding: 10rpx 0;
}

.query-btn {
	background: linear-gradient(135deg, #4393ff, #2979ff);
	color: white;
	margin: 20rpx 0 10rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: 500;
	box-shadow: 0 6rpx 16rpx rgba(67, 147, 255, 0.2);
	
	&:active {
		transform: scale(0.98);
	}
}

.result-section {
	background-color: #ffffff;
	border-radius: 16rpx;
	margin: 30rpx 0;
	overflow: hidden;
	box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.05);
}

.cosmic-banner {
	height: 12rpx;
	width: 100%;
}

.result-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #303133;
	text-align: center;
	margin: 30rpx 0 10rpx;
}

.cosmic-symbol {
	font-size: 56rpx;
	text-align: center;
	margin: 10rpx 0;
}

.result-date {
	font-size: 26rpx;
	color: #909399;
	text-align: center;
	margin-bottom: 30rpx;
}

.result-essence {
	padding: 20rpx 30rpx;
	background-color: #f8f9fc;
	margin-bottom: 20rpx;
}

.essence-title {
	font-size: 28rpx;
	color: #303133;
	font-weight: 500;
	margin-bottom: 10rpx;
	text-align: center;
}

.essence-content {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.6;
	font-style: italic;
	text-align: center;
}

.cosmic-divider {
	height: 1rpx;
	background-color: #ebeef5;
	margin: 0 30rpx;
}

.category-container {
	padding: 20rpx 30rpx;
}

.result-category {
	display: flex;
	margin-bottom: 30rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.category-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 24rpx;
	font-weight: 600;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.category-info {
	flex: 1;
}

.category-title {
	font-size: 28rpx;
	color: #303133;
	font-weight: 500;
	margin-bottom: 10rpx;
}

.category-content {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.6;
}

.divider {
	display: flex;
	align-items: center;
	margin: 40rpx 0;
}

.divider-line {
	flex: 1;
	height: 1rpx;
	background-color: #ebeef5;
}

.divider-text {
	padding: 0 20rpx;
	font-size: 26rpx;
	color: #909399;
}

.section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #303133;
	margin-bottom: 20rpx;
	position: relative;
	padding-left: 20rpx;
	
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 4rpx;
		height: 30rpx;
		width: 6rpx;
		background: linear-gradient(135deg, #4393ff, #2979ff);
		border-radius: 3rpx;
	}
}

.paragraph {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.6;
	margin-bottom: 20rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.cosmos-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 30rpx 0;
}

.cosmos-element {
	width: 18%;
	margin-bottom: 20rpx;
	text-align: center;
}

.element-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10rpx;
	color: #ffffff;
	font-size: 30rpx;
	font-weight: 600;
}

.element-name {
	font-size: 24rpx;
	color: #606266;
}

.layer-box {
	background-color: #f8f9fc;
	padding: 20rpx;
	border-radius: 10rpx;
}

.layer-item {
	display: flex;
	margin-bottom: 20rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.layer-number {
	width: 40rpx;
	height: 40rpx;
	background: linear-gradient(135deg, #4393ff, #2979ff);
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.layer-content {
	flex: 1;
}

.layer-title {
	font-size: 28rpx;
	color: #303133;
	font-weight: 500;
	margin-bottom: 6rpx;
}

.layer-desc {
	font-size: 26rpx;
	color: #606266;
	line-height: 1.5;
}

.cosmic-wisdom {
	background-color: #f8f9fc;
	padding: 30rpx;
	border-radius: 10rpx;
	margin-top: 30rpx;
	position: relative;
}

.wisdom-title {
	font-size: 28rpx;
	color: #303133;
	font-weight: 500;
	margin-bottom: 20rpx;
	text-align: center;
}

.wisdom-quote {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.6;
	font-style: italic;
	margin-bottom: 16rpx;
	position: relative;
	padding: 0 30rpx;
	
	&::before, &::after {
		content: '"';
		font-size: 60rpx;
		color: rgba(67, 147, 255, 0.1);
		position: absolute;
		font-family: serif;
	}
	
	&::before {
		left: 0;
		top: -20rpx;
	}
	
	&::after {
		right: 0;
		bottom: -40rpx;
	}
}

.wisdom-author {
	font-size: 26rpx;
	color: #909399;
	text-align: right;
	margin-top: 10rpx;
}

.back-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: linear-gradient(135deg, #4393ff, #2979ff);
	color: #ffffff;
	border-radius: 40rpx;
	margin: 40rpx auto;
	font-size: 28rpx;
	box-shadow: 0 6rpx 16rpx rgba(67, 147, 255, 0.2);
	
	&:active {
		transform: scale(0.98);
	}
}
</style> 